<!--会员详情查看页面-->
<!--用户资料编辑-->
<template>
  <f7-page no-toolbar :page-content="false" style="background-color: #f4f5f5;">
    <f7-navbar back-link="Back" title="大卫的个人资料">
    </f7-navbar>

    <f7-toolbar tabbar top>
      <f7-link tab-link="#baseTab" tab-link-active>资料</f7-link>
      <f7-link tab-link="#photoTab">照片</f7-link>
      <f7-link tab-link="#labelTab">标签</f7-link>
    </f7-toolbar>

    <!--基本资料-->
    <f7-tabs swipeable>
      <f7-tab id="baseTab" tab-active >

        <f7-page no-navbar>
          <f7-list form class="margin-top">
            <f7-list-input
                    label="昵称"
                    type="text"
                    placeholder="昵称"
            />
            <f7-list-input
                    label="性别"
                    type="select"
                    defaultValue="Male"
            >
              <option>男</option>
              <option>女</option>
            </f7-list-input>
            <f7-list-item link="/comment/commentListView/" title="TA的印象评价" after=""></f7-list-item>
            <f7-list-item link="/activity/joinActList/" title="我要评价TA" after="共同参与过活动"></f7-list-item>

            <f7-list-input
                    label="当前手机号"
                    name="username"
                    placeholder="请输入手机号码"
                    type="text"
            />
            <f7-list-input
                    label="身高"
                    name="username"
                    placeholder="请输入手机号码"
                    type="text"
            />
            //体重，职业，交友要求，城市
            <f7-list-input
                    label="出生日期"
                    type="date"
                    placeholder="出生日期"
                    value="2019-04-30"
            />
            <f7-list-input
                    label="个人签名"
                    type="textarea"
                    placeholder="个人签名"
            />
            <f7-list-input
                    label="当前手机号"
                    name="username"
                    placeholder="请输入手机号码"
                    type="text"
            />
            <f7-list-input
                    label="身高"
                    name="username"
                    placeholder="请输入手机号码"
                    type="text"
            />
            //体重，职业，交友要求，城市
            <f7-list-input
                    label="出生日期"
                    type="date"
                    placeholder="出生日期"
                    value="2019-04-30"
            />
            <f7-list-input
                    label="个人签名"
                    type="textarea"
                    placeholder="个人签名"
            />
          </f7-list>
        </f7-page>

      </f7-tab>


      <!--照片-->
      <f7-tab id="photoTab">
        <photoBrowerView></photoBrowerView>
      </f7-tab>

      <!--兴趣标签-->
      <f7-tab id="labelTab">
        <f7-page no-navbar>
          <labelListView></labelListView>
        </f7-page>
      </f7-tab>
    </f7-tabs>

    <f7-toolbar bottom>
      <f7-link icon-f7="heart" style="margin-left: 10%;" target="_blank" text="收藏TA" ></f7-link> <!--heart_fill-->
      <f7-link icon-f7="star_fill" style="margin-right: 10%;" target="_blank" text="关注TA" ></f7-link> <!--star_fill-->
    </f7-toolbar>

  </f7-page>
</template>

<script>
  import labelListView from '../../components/labelListView.vue';
  import photoBrowerView from '../../components/photoBrowerView.vue';

  export default {
    components: {labelListView,photoBrowerView},
    data() {
      return {
        swiperParams: {
          // speed: 500,
          loop: true,
          // height:600,
          // autoplay: {
          //   delay: 1500,
          // },
          direction:'vertical'
          // preventLinksPropagation: false   // 阻止点击事件冒泡
        },

        photos: [
          {
            url: 'img/beach.jpg',
            caption: 'Amazing beach in Goa, India',
          },
          'http://placekitten.com/1024/1024',
          'img/lock.jpg',
          {
            url: 'img/monkey.jpg',
            caption: 'I met this monkey in Chinese mountains',
          },
          {
            url: 'img/mountains.jpg',
            caption: 'Beautiful mountains in Zhangjiajie, China',
          },
        ],


      };
    },
    methods: {
      refresh(event, done) {
        setTimeout(() => {
          // todo
          done();
        }, 1000);
      },

    }
  }
</script>


